import React, { useState, useEffect } from 'react';
import './header.css'
const Header = () => {
    const [time, setTime] = useState('');
    // 更新时间
    useEffect(() => {
        const updateTime = () => {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            setTime(`${hours}:${minutes}`);
        };
        updateTime();
        const intervalId = setInterval(updateTime, 1000);
        return () => clearInterval(intervalId);
    }, []);

    return (
        <>
            <div className="status-bar">
                <div className="time">{time}</div>
                <div className="status-icons">
                    {/* 信号图标 */}
                    <div className="signal">
                        {[...Array(4)].map((_, i) => (
                            <div key={i} className="signal-bar" />
                        ))}
                    </div>

                    {/* 电池图标 */}
                    <div className="battery">
                        <div className="battery-level" style={{ width: '80%' }} />
                    </div>
                </div>
            </div>
        </>
    )
}
export default Header